<template>
	<div id="app">
		<van-overlay :show="showLoading">
			<van-loading color="#1989fa" vertical size="24" v-show="showLoading">加载中. . .</van-loading>
		</van-overlay>
		<!-- <van-button @click='clearOpenId'>清除openid</van-button> -->
		<router-view v-if="hasAutho" />
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	const serviceAPI = require('@/serviceAPI.js')
	export default {
		name: 'App',
		data() {
			return {
				code: '',
				url: '',
				hasAutho:false,
			}
		},
		async created() {
			await this.getUrl()
			if (!window.localStorage.getItem('openId')) { // 如果缓存localStorage中没有微信openId，则需用code去后台获取
				this.getCode()
			} else {
				// 别的业务逻辑
				this.hasAutho = true
			}
		},
		computed: {
			...mapState(['showLoading'])
		},
		methods: {
			clearOpenId(){
				localStorage.removeItem('openId')
				localStorage.removeItem('headImgUrl')
				localStorage.removeItem('nickName')
			},
			// 获取链接
			async getUrl() {
				let res = await this.$axios.post(serviceAPI.userAutho, {
					redirectUri: window.location.href
				})
				if (res.data.code === 10000) {
					this.url = res.data.data.authoUrl
				}
			},
			// 获取用户信息
			async getUserInfo() {
				let res = await this.$axios.post(serviceAPI.getUserInfo, {
					code: this.code
				})
				if (res.data.code === 10000) {
					this.hasAutho = true
					localStorage.setItem('openId', res.data.data.openId)
					localStorage.setItem('headImgUrl', res.data.data.headImgUrl)
					localStorage.setItem('nickName', res.data.data.nickName)
				}
			},
			getCode() { // 非静默授权，第一次有弹框
				this.code = ''
				this.code = this.GetUrlParame('code') // 截取code
				if (this.code == null || this.code === '') { // 如果没有code，则去请求
					window.location.href = this.url
				} else {
					this.getUserInfo()
				}
			},
			getUrlCode() { // 截取url中的code方法
				var url = location.search
				this.winUrl = url
				var theRequest = new Object()
				if (url.indexOf("?") != -1) {
					var str = url.substr(1)
					var strs = str.split("&")
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				return theRequest
			},
			// 截取code
			GetUrlParame(parameName) {
				/// 获取地址栏指定参数的值
				// 获取url中跟在问号后面的部分
				var parames = window.location.search
				// 检测参数是否存在
				if (parames.indexOf(parameName) > -1) {
					var parameValue = ''
					parameValue = parames.substring(parames.indexOf(parameName), parames.length)
					// 检测后面是否还有参数
					if (parameValue.indexOf('&') > -1) {
						// 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值
						parameValue = parameValue.substring(0, parameValue.indexOf('&'))
						// 去掉参数名, 得到最终纯值字符串
						parameValue = parameValue.replace(parameName + '=', '')
						return parameValue
					}
					return ''
				}
			}
		}

	}
</script>

<style>
	.van-loading--vertical .van-loading__text{
		color: #4F9FEF;
		font-size: 15px;
		font-weight: 600;
		margin-top: 16px;
	}
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.index .van-overlay {
		background: no-repeat;
	}
	.van-loading{
		margin-top: 50%;
		text-align: center;
	}
</style>
